<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="javascript:root_Loaded"
        x:Name="root"
        Height="318" Width="683">
  <Canvas.RenderTransform>
    <TransformGroup>
      <TranslateTransform X="-140" Y="-100"/>
      <ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1"/>
    </TransformGroup>
  </Canvas.RenderTransform>

  <!-- Animations -->
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard BeginTime="1" x:Name="listBoxCollapse" Completed="javascript:collapseCompleted">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="listbox">
              <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="0" KeyTime="00:00:00"/>
              <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="21.600000000000023" KeyTime="00:00:00.1250000"/>
              <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="-211" KeyTime="00:00:01"/>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>

    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard BeginTime="1" x:Name="listBoxFlyout" Completed="javascript:flyoutCompleted">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="listbox">
              <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="-211" KeyTime="00:00:00.1250000"/>
              <SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="0" KeyTime="00:00:01"/>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>

    <!-- timer animation -->
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard BeginTime="1" x:Name="timer" Completed="javascript:timerCompleted">
            <DoubleAnimation Storyboard.TargetName="timerTarget" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="1" AutoReverse="true" Duration="0:0:.1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>

  <!-- Dummy element used for timer -->
  <Rectangle Opacity="0" x:Name="timerTarget"/>

  <!-- ListBox -->
  <Canvas x:Name="listbox" Canvas.Top="20">
    <Rectangle Canvas.Left="412.778" Canvas.Top="131.521" Width="363.24" Height="233.8" RadiusX="0" RadiusY="0">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.456,1.008" EndPoint="0.449,0.004">
          <GradientStop Color="#FF666666" Offset="0.243"/>
          <GradientStop Color="#FF222222" Offset="0"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

    <Rectangle Canvas.Left="560.778" Canvas.Top="133.7" Width="204.3" Height="230" Fill="black" StrokeThickness="0.666667" StrokeLineJoin="Round" Stroke="Gray"/>

    <Canvas x:Name="toggleButton">
      <Rectangle x:Name="toggleButtonBackground" Canvas.Left="766.5" Canvas.Top="240" Width="8" Height="23" Fill="#FF505050" StrokeThickness=".27"/>

      <Canvas x:Name="expandButton" Canvas.Left="766.5" Canvas.Top="240" Opacity="0">
        <Path Stroke="#FFbbbbbb" StrokeThickness=".47" Data="m 4,17 l 2.5,-5.5 -2.5,-5.5" />
        <Path Stroke="#FFbbbbbb" StrokeThickness=".47" Data="m 2.2,17 l 2.5,-5.5 -2.5,-5.5" />
      </Canvas>

      <Canvas x:Name="collapseButton" Canvas.Left="766.5" Canvas.Top="240">
        <Path Stroke="#FFbbbbbb" StrokeThickness=".47" Data="m 6.2,17 l -2.5,-5.5 2.5,-5.5" />
        <Path Stroke="#FFbbbbbb" StrokeThickness=".47" Data="m 4.4,17 l -2.5,-5.5 2.5,-5.5" />
      </Canvas>
    </Canvas>

    <!-- Scrollbar -->
    <Canvas Canvas.Left="753.778" Canvas.Top="145">
      <!-- Track -->
      <Rectangle  Width="10.7" Height="207.3" Fill="sc#1, 0.0152085144, 0.0152085144, 0.0152085144" Stroke="Black" StrokeThickness=".2"/>
    </Canvas>

    <Canvas Canvas.Left="753.778" Canvas.Top="134.3">
      <!-- Up button -->
      <Rectangle  Width="10.7" Height="10.7">
        <Rectangle.Fill>
          <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <LinearGradientBrush.RelativeTransform>
              <TransformGroup>
                <TranslateTransform X="-0.5" Y="-0.5"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="-90"/>
                <TranslateTransform X="0.5" Y="0.5"/>
              </TransformGroup>
            </LinearGradientBrush.RelativeTransform>
            <GradientStop Color="sc#1, 0.01798122, 0.01798122, 0.01798122" Offset="0"/>
            <GradientStop Color="sc#1, 0.144741789, 0.144741789, 0.144741789" Offset="0.76923076923076927"/>
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <Path Fill="gray" Data="M 5,3 l 2,4 -4,0 z" />
    </Canvas>

    <Canvas Canvas.Left="753.778" Canvas.Top="352.3">
      <!-- down button -->
      <Rectangle  Width="10.7" Height="10.7">
        <Rectangle.Fill>
          <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <LinearGradientBrush.RelativeTransform>
              <TransformGroup>
                <TranslateTransform X="-0.5" Y="-0.5"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="-90"/>
                <TranslateTransform X="0.5" Y="0.5"/>
              </TransformGroup>
            </LinearGradientBrush.RelativeTransform>
            <GradientStop Color="sc#1, 0.01798122, 0.01798122, 0.01798122" Offset="0"/>
            <GradientStop Color="sc#1, 0.144741789, 0.144741789, 0.144741789" Offset="0.76923076923076927"/>
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <Path Fill="gray" Data="M 5.5,7.5 l 2,-4 -4,0 z" />
    </Canvas>

    <!-- Thumb -->
    <Canvas Canvas.Left="753.778" Canvas.Top="145" x:Name="scrollThumb">
      <Rectangle x:Name="thumbBackground" Width="10.7" Height="208.1" Stroke="Black" StrokeThickness=".2">
        <Rectangle.Fill>
          <LinearGradientBrush StartPoint="0.53,0.991" EndPoint="0.436,0.003">
            <GradientStop Color="#FF545454" Offset="0"/>
            <GradientStop Color="#FF939393" Offset="1"/>
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
    </Canvas>

    <!-- Item Clipping border -->
    <Canvas Canvas.Left="561.778" Canvas.Top="134.6" Clip="m 0,0 l 204.3,0, 0,228.5, -204.3,0 z">
      <!-- Items Canvas-->
      <Canvas x:Name="itemsContainer" Canvas.Top="0">
        <!-- Selection Rectangle -->
        <Rectangle x:Name="selectionRect" Width="192" Height="47" Stroke="White" StrokeThickness="1.5"/>
      </Canvas>
    </Canvas>

    <Canvas Canvas.Left="630" Canvas.Top="98">
      <Canvas.RenderTransform>
        <ScaleTransform ScaleY=".85" />
      </Canvas.RenderTransform>
      <TextBlock FontSize="16" Text='"WPF/E"' Foreground="gainsboro" FontFamily="Courier New"/>
    </Canvas>
    <TextBlock Canvas.Left="602" Canvas.Top="113" FontSize="11" Text='Video Library Sample' Foreground="gainsboro" FontFamily="Verdana"/>
  </Canvas>

  <Canvas x:Name="Layer_1" Width="1056" Height="816">

    <!-- Background -->
    <Rectangle Canvas.Left="192.778" Canvas.Top="114.7" Width="362" Height="271.5" RadiusX="0" RadiusY="0" Stroke="#FF000000" >
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.468,1.001" EndPoint="0.467,0.008">
          <GradientStop Color="#FF555555" Offset="0.243"/>
          <GradientStop Color="#FF333333" Offset="0"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

    <!--Media Plane -->
    <Canvas Canvas.Left="200.889" Canvas.Top="123.889" Width="345.3" Height="256" >
      <Rectangle Width="345.3" Height="256" Fill="black" />
      <MediaElement x:Name="mediaElement"  Width="345.3" Height="256"/>
    </Canvas>

    <!-- Media Border -->
    <Rectangle Canvas.Left="200.556" Canvas.Top="123.555" Width="346.5" Height="256.5" StrokeThickness="0.666667" StrokeLineJoin="Round" Stroke="Gray"/>

    <Canvas x:Name="Group" Canvas.Left="196.31" Canvas.Top="419.022" Width="47.4647" Height="46.6063">

      <!-- Transport buttons -->
      <Canvas x:Name="Group_1" Canvas.Left="0" Canvas.Top="0.374573" Width="46.2395" Height="46.2317">

        <Canvas x:Name="stopButton">
          <Rectangle Opacity="0.5" x:Name="stopButtonBackground" Width="17.801" Height="15.3" Canvas.Left="16" Canvas.Top="-33">
            <Rectangle.Fill>
              <LinearGradientBrush StartPoint="0.49,1.006" EndPoint="0.49,0.012">
                <GradientStop Color="#00FFFFFF" Offset="0.42"/>
                <GradientStop Color="#94FFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Rectangle.Fill>
          </Rectangle>

          <!-- stop icon -->
          <Path Fill="#A3FFFFFF" Width="4.905" Height="4.905" Data="F1 M 0.171692,0L 4.7337,0C 4.82854,0 4.90541,0.0768433 4.90541,0.171692L 4.90541,4.7337C 4.90541,4.82849 4.82854,4.9054 4.7337,4.9054L 0.171692,4.9054C 0.0768585,4.9054 0,4.82849 0,4.7337L 0,0.171692C 0,0.0768433 0.0768585,0 0.171692,0 Z " Canvas.Left="22.636" Canvas.Top="-27.113"/>
        </Canvas>

        <Canvas x:Name="muteButton" Canvas.Left="43" Canvas.Top="-33" Width="7.776" Height="6.6">
          <Rectangle Opacity="0.5" x:Name="muteButtonBackground" Width="17.801" Height="15.3" Canvas.Left="0" Canvas.Top="0">
            <Rectangle.Fill>
              <LinearGradientBrush StartPoint="0.49,1.006" EndPoint="0.49,0.012">
                <GradientStop Color="#00FFFFFF" Offset="0.42"/>
                <GradientStop Color="#94FFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Rectangle.Fill>
          </Rectangle>

          <!-- Mute icon -->
          <Path Canvas.Left="9.559" Canvas.Top="5" Width="3.217" Height="6.6" StrokeThickness="0.459029" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="F1 M 0.229515,0.229514C 0.980354,0.229514 2.98713,0.878074 2.98713,3.52462C 2.98713,5.7355 1.18624,6.37032 0.285789,6.37032"/>
          <Path Canvas.Left="9.368" Canvas.Top="6.337" Width="1.965" Height="3.938" StrokeThickness="0.459029" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="F1 M 0.229515,0.229514C 0.577888,0.229514 1.73563,0.596946 1.73563,2.09609C 1.73563,3.34847 0.673423,3.70815 0.255622,3.70815"/>
          <Path Canvas.Left="5" Canvas.Top="5.347" Width="3.435" Height="6.026" Fill="#FFFFFFFF" Data="F1 M 3.3019,0C 3.37544,0 3.43507,0.0596313 3.43507,0.13324L 3.43507,5.89331C 3.43507,5.96686 3.37544,6.02643 3.3019,6.02643L 2.54376,6.02643C 2.47021,6.02643 2.41058,5.96686 2.41058,5.89331L 2.41058,5.71893L 1.12935,4.03778L 0.25853,4.03778C 0.115738,4.03778 0,3.92194 0,3.77924L 0,2.30756C 0,2.16473 0.115738,2.04901 0.25853,2.04901L 1.04878,2.04901L 2.41058,0.305847L 2.41058,0.13324C 2.41058,0.0596313 2.47021,0 2.54376,0L 3.3019,0 Z "/>

          <!-- No smoking icon -->
          <Canvas x:Name="muteIcon" Canvas.Top="3" Canvas.Left="3" Opacity="0" Width="0" Height="0">
            <Ellipse Height="9.5" Width="9.5" Stroke="red" StrokeThickness="1.5" Canvas.Left="1" Canvas.Top="1" />
            <Line X1="2" Y1="1" X2="7" Y2="7" Stroke="red" StrokeThickness="1.5" Width="7.576" Height="7.48" Canvas.Left="1" Canvas.Top="1" />
          </Canvas>
        </Canvas>

        <Canvas x:Name="volumeDownButton">
          <Rectangle Opacity="0.5" x:Name="volumeDownButtonBackground" Width="17.801" Height="15.3" Canvas.Left="62.167" Canvas.Top="-33">
            <Rectangle.Fill>
              <LinearGradientBrush StartPoint="0.49,1.006" EndPoint="0.49,0.012">
                <GradientStop Color="#00FFFFFF" Offset="0.42"/>
                <GradientStop Color="#94FFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Rectangle.Fill>
          </Rectangle>

          <!-- Volume down icon -->
          <Rectangle Fill="#FFFFFFFF" Width="6.5" Height="1.3" RadiusX=".5" RadiusY=".5" Canvas.Left="68.333" Canvas.Top="-25.533" />
        </Canvas>

        <Canvas x:Name="volumeUpButton">
          <Rectangle Opacity="0.5" x:Name="volumeUpButtonBackground" Width="17.801" Height="15.3" Canvas.Left="80.834" Canvas.Top="-33">
            <Rectangle.Fill>
              <LinearGradientBrush StartPoint="0.49,1.006" EndPoint="0.49,0.012">
                <GradientStop Color="#00FFFFFF" Offset="0.42"/>
                <GradientStop Color="#94FFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Rectangle.Fill>
          </Rectangle>

          <!-- Volume up icon -->
          <Rectangle Fill="#FFFFFFFF" Width="1.3" Height="7"  RadiusX=".5" RadiusY=".5" Canvas.Left="89.167" Canvas.Top="-28.667"/>
          <Rectangle Fill="#FFFFFFFF" Width="7" Height="1.3" RadiusX=".5" RadiusY=".5" Canvas.Left="86.367" Canvas.Top="-25.867"/>
        </Canvas>
      </Canvas>

      <Canvas x:Name="playButton">
        <Rectangle Opacity="0.4" x:Name="playButtonBackground" Width="17.801" Height="15.3" Canvas.Left="-2.892" Canvas.Top="-32.681">
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.49,1.006" EndPoint="0.49,0.012">
              <GradientStop Color="#00FFFFFF" Offset="0.42"/>
              <GradientStop Color="#9EFFFFFF" Offset="1"/>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>

        <!-- Play button icon -->
        <Path x:Name="playIcon" Canvas.Left="2.849" Canvas.Top="-29.023" Width="8.049" Height="8.674" Data="F1 M 0,8.60958L 0,0.0640488C 0.153442,-0.0215225 0.402069,-0.0212784 0.555511,0.0643539L 7.93384,4.18197C 8.08676,4.2673 8.08728,4.40609 7.93385,4.49172L 0.555542,8.60934C 0.402069,8.69497 0.152924,8.69497 0,8.60958 Z ">
          <Path.Fill>
            <SolidColorBrush Color="#7FFFFFFF"/>
          </Path.Fill>
        </Path>

        <!-- Pause icon -->
        <Path x:Name="pauseIcon" Opacity="0" Canvas.Left="0.849" Canvas.Top="-29.023" Data="F1 M 2,0 l 2.5,0 0,8.6 -2.5,0 Z M 6,0 l 2.5,0 0,8.6 -2.5,0 Z" Width="8.5" Height="8.6">
          <Path.Fill>
            <SolidColorBrush Color="#80FFFFFF"/>
          </Path.Fill>
        </Path>
      </Canvas>
    </Canvas>

    <!-- Progress Thumb -->
    <Rectangle x:Name="progressThumb" Opacity=".55" Canvas.Left="212" Canvas.Top="368.5" Width="4" Height="10" RadiusX="1.5" RadiusY="1.5">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.489876,0.381109" EndPoint="0.489876,0.910053">
          <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
            <GradientStop Color="#FFCFCFCF" Offset="1"/>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

    <!-- Download progress -->
    <Rectangle x:Name="downloadProgressRect" Opacity=".4" Canvas.Left="213.43" Canvas.Top="372.561" Width="0" Height="2.33334" Fill="gray" />
    <!-- Playback progress -->
    <Rectangle x:Name="playbackProgressRect" Opacity=".7" Canvas.Left="213.43" Canvas.Top="372.561" Width="0" Height="2.33334" Fill="gray" />
    <!-- Progress border -->
    <Rectangle Opacity=".6" Canvas.Left="213.23" Canvas.Top="372.361" Width="320.5" Height="2.73337" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="gray" />
    <!-- Seek mouse input region -->
    <Rectangle Opacity=".001" Fill="white" Canvas.Left="213.23" Canvas.Top="366" Width="320.5" Height="12" MouseLeftButtonUp="javascript:seekMouseUp" />
    <!-- Duration TextBlock -->
    <TextBlock x:Name="duration" Canvas.Left="504" Canvas.Top="360" Text="00:00" FontFamily="Verdana" FontSize="10" Foreground="gainsboro" Opacity=".2" />

    <Path Stretch="Fill" Stroke="#FFCECECE" StrokeThickness="0.25" x:Name="line" Width="583.185" Height="1" Canvas.Left="193.5" Canvas.Top="403.167" Data="M194,404.66667 L776.18477,404.66667"/>
    <Rectangle StrokeThickness="0.25" Width="582.667" Height="82" Canvas.Left="194.333" Canvas.Top="405.333">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.474,1.008" EndPoint="0.473,-0.024">
          <GradientStop Color="#00FFFFFF" Offset="0"/>
          <GradientStop Color="#3AFFFFFF" Offset="1"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</Canvas>